<template>
  <d2-container>
    <el-form :model="model" ref="form" :rules="rules">
      <el-form-item label="文档类型">
        <el-select v-model="model.key" placeholder="请选择" @change="changeKey">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="value">
        <wang-editor v-model="model.value"></wang-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </d2-container>
</template>

<script>
import { fetchView, update } from './api'

export default {
  name: 'basic',
  data () {
    return {
      model: {
        key: 'task_rule',
        value: ''
      },
      rules: {
        value: [
          { required: true, message: '请输入内容' }
        ]
      },
      options: [
        {
          label: '发单规则',
          value: 'task_rule'
        }, {
          label: '接单规则',
          value: 'take_task_rule'
        }, {
          label: '做单说明',
          value: 'make_task_rule'
        }, {
          label: '免责声明',
          value: 'duty_rule'
        },
        // {
        //   label: '邀请好友规则',
        //   value: 'invite_rule'
        // },
        // {
        //   label: '排行榜说明',
        //   value: 'ranking_rule'
        // },
        // {
        //   label: '充值说明',
        //   value: 'recharge_info'
        // },
        {
          label: '用户协议',
          value: 'user_rule'
        }, {
          label: '隐私协议',
          value: 'secret_rule'
        }
      ]
    }
  },
  async mounted () {
    await this.fetchDetail()
  },
  methods: {
    async fetchDetail () {
      const { data: [model] } = await fetchView({ key: this.model.key })
      Object.assign(this.model, model)
    },
    async changeKey (key) {
      this.model.key = key
      await this.fetchDetail()
    },
    async onSubmit () {
      await this.$refs.form.validate()
      const { key, value } = this.model
      const params = [{ key, value }]
      await update(params)
      this.$message.success('保存成功')
      await this.fetchDetail()
    }
  }
}
</script>
